<template>
	<view class="all" :style="{'height': widHeight +'px'}">
		<view class="uni-section">
			<uni-section title="订单状态">
				<uni-steps :options="list1" active-icon="medal" active-color="#c00000" :active="active" />
			</uni-section>
		</view>
		<view class="order-all">
			<view class="order-time">
				<text>下单时间:</text>
				<text>{{orderDetail.create_time}}</text>
			</view>
			<view class="order-time">
				<text>订单编号:</text>
				<text>{{orderDetail.order_number}}</text>
			</view>
			<view class="order-time">
				<text>订单留言:</text>
				<text>{{orderDetail.trade_no || '无'}}</text>
			</view>
		</view>
		<view class="order-goods-all">
			<view class="order-goods" v-for="(itemSon,index) in orderDetail.goods" :key="itemSon.goods_id">
				<view class="order-image" @click="gotoGood(itemSon.goods_id)">
					<image :src="itemSon.goods_small_logo" class="icon"></image>
				</view>
				<view class="order-text">
					<view class="order-goods_name">{{itemSon.goods_name}} </view>
					<view class="order-num">
						<view class="order-meney">￥{{itemSon.goods_price}}</view>
						<text>x{{itemSon.goods_number}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="order-time">
				<text>地址</text>
				<text>{{orderDetail.consignee_addr.userName || "小懒哥"}}:
					{{orderDetail.consignee_addr.telNumber || "15678831312"}}</text>
			</view>
			<view class="detail-addr"
				v-if=" orderDetail.consignee_addr != '' && typeOf =='object' ">
				{{orderDetail.consignee_addr.provinceName}}
				{{orderDetail.consignee_addr.cityName}}
				{{orderDetail.consignee_addr.countyName}}
				{{orderDetail.consignee_addr.detailInfo}}
			</view>
			<view class="detail-addr"
				v-else-if="orderDetail.consignee_addr != '' && typeOf =='string' ">
				{{orderDetail.consignee_addr}}
			</view>
			<view class=" detail-addr" v-else>
				北京市东城区毛家湾胡同甲13号
			</view>
			<view class="detail-total">
				<view class="order-time">
					<text>商品合计:</text>
					<text>￥{{orderDetail.total_price}}</text>
				</view>
				<view class="order-time">
					<text>订单运费:</text>
					<text>￥0</text>
				</view>
				<view class="order-time">
					<text>订单优惠:</text>
					<text>￥0</text>
				</view>
				<view class="order-time">
					<text>订单实付:</text>
					<text>￥{{orderDetail.total_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				widHeight: 0,
				typeOf: void 0,
				orderDetail: {},
				list1: [{
					title: '未付款'
				}, {
					title: '已付款'
				}, {
					title: '未收货'
				}, {
					title: '未评价'
				}],
			};

		},
		onLoad(option) {
		uni.$setNavigationBarColor()
			this.orderDetail = JSON.parse(option.item)		
			let a = this.orderDetail.consignee_addr.indexOf("errMsg")
			if (a > 0) {
				this.orderDetail.consignee_addr = JSON.parse(this.orderDetail.consignee_addr)
			
			}

			this.typeOf = typeof this.orderDetail.consignee_addr
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		},
		methods: {
			gotoGood(val){
				uni.navigateTo({
					url:"/subGoodsDetail/goods_detail/goods_detail?goods_id="+ val
				})
			},
			change() {
				if (this.active < this.list1.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.all {

		background-color: #f4f4f4;

		.uni-section {

			padding-bottom: 30rpx;
		}

		.detail-total {
			padding-top: 25rpx;
		}

		.detail-addr {
			background-color: white;
			display: flex;
			justify-content: end;
			padding-right: 20rpx;
			font-size: 28rpx;
			padding-bottom: 20rpx;
		}

		.myCart {
			margin-top: 20rpx;
		}


		.order-time {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			color: #3b3b3b;
			font-size: 28rpx;
			background-color: white;
		}

		.order-goods-all {
			margin-top: 30rpx;

			.order-goods {
				display: flex;

				background-color: white;

				.order-text {
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: 100%;

					.order-goods_name {
						font-size: 24rpx;
					}

					.order-num {
						display: flex;
						justify-content: space-between;

						.order-meney {
							color: #c00000;
						}

						text {
							padding-right: 20rpx;
						}
					}

				}

				.order-image {
					image {
						padding-left: 10rpx;
						width: 100px;
						height: 100px;
					}
				}
			}

		}

	}
	
	
</style>